<template>
  <Dialog v-model="dialogVisible" title="题目详情" width="800px">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="题目类型">
        <el-tag>{{ getTypeName(questionData.questionType) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="难度等级">
        <el-tag :type="getDifficultyColor(questionData.difficultyLevel)">
          {{ getDifficultyName(questionData.difficultyLevel) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="分值">
        {{ questionData.score || 0 }}分
      </el-descriptions-item>
      <el-descriptions-item label="职业类别">
        {{ questionData.professionName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="技能等级">
        <el-tag>{{ getLevelName(questionData.skillLevel) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="知识点">
        {{ questionData.knowledgePoint || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="题目内容" :span="2">
        <div style="white-space: pre-wrap; max-height: 200px; overflow-y: auto; background: #f5f5f5; padding: 10px; border-radius: 4px;">
          {{ questionData.questionContent || '-' }}
        </div>
      </el-descriptions-item>
    </el-descriptions>
    
    <!-- 选项内容（单选题、多选题） -->
    <el-divider content-position="left" v-if="questionData.questionType === 1 || questionData.questionType === 2">
      选项内容
    </el-divider>
    <el-table :data="questionData.optionList || []" border style="width: 100%" v-if="questionData.questionType === 1 || questionData.questionType === 2">
      <el-table-column prop="optionCode" label="选项" width="80" />
      <el-table-column prop="optionContent" label="选项内容" />
      <el-table-column prop="isCorrect" label="正确答案" width="100">
        <template #default="{ row }">
          <el-tag :type="row.isCorrect === 1 ? 'success' : 'info'">
            {{ row.isCorrect === 1 ? '正确' : '' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 参考答案 -->
    <el-divider content-position="left">参考答案</el-divider>
    <div style="background: #f0f9ff; padding: 15px; border-radius: 4px; border-left: 4px solid #409eff;">
      <div style="white-space: pre-wrap;">
        {{ questionData.correctAnswer || '-' }}
      </div>
    </div>
    
    <!-- 解析说明 -->
    <el-divider content-position="left" v-if="questionData.explanation">解析说明</el-divider>
    <div style="background: #f5f5f5; padding: 15px; border-radius: 4px;" v-if="questionData.explanation">
      <div style="white-space: pre-wrap;">
        {{ questionData.explanation }}
      </div>
    </div>
    
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dialogVisible = ref(false)
const questionData = ref({} as any)

const getTypeName = (type: number) => {
  const typeMap = { 1: '单选题', 2: '多选题', 3: '判断题', 4: '填空题', 5: '简答题' }
  return typeMap[type] || '-'
}

const getDifficultyName = (level: number) => {
  const levelMap = { 1: '简单', 2: '中等', 3: '困难' }
  return levelMap[level] || '-'
}

const getDifficultyColor = (level: number) => {
  const colorMap = { 1: 'success', 2: 'warning', 3: 'danger' }
  return colorMap[level] || 'info'
}

const getLevelName = (level: number) => {
  const levelMap = { 1: '初级', 2: '中级', 3: '高级', 4: '技师', 5: '高级技师' }
  return levelMap[level] || '-'
}

const open = (data: any) => {
  dialogVisible.value = true
  questionData.value = data
}

defineExpose({ open })
</script> 